<template>
  <div class="container-certify">
    <div class="wrap">
      <el-button :icon="ArrowLeftBold" text @click="back" v-if="step < 3">退出认证</el-button>
      <div class="certify-box">
        <div class="top">
          <div class="title">
            欢迎认证 ·
            <strong>企业认证</strong>
          </div>
          <div class="step">
            <div class="step-item" :class="{ active: step == 1 }">
              <div class="step-item-icon">1</div>
              <div class="step-item-title">组织信息核验</div>
            </div>
            <div class="step-item" :class="{ active: step == 2 }">
              <div class="step-item-icon">2</div>
              <div class="step-item-title">认证方式</div>
            </div>
            <div class="step-item" :class="{ active: step == 3 }">
              <div class="step-item-icon">3</div>
              <div class="step-item-title">完成认证</div>
            </div>
          </div>
          <img src="../../assets/enterprise/renzheng_icon.png" />
        </div>
        <div class="content">
          <div class="inner">
            <div class="tip" v-if="step < 3">
              <img src="../../assets/enterprise/renzheng_icon1.png" />
              <span>您填写的信息仅用于完成本次认证，平台方不会留存或泄露，请放心填写。</span>
            </div>
            <component :is="stepComponent" :form-data="formData" @submit-success="handleStepSuccess" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import Step2 from "./common/Certify_step3.vue";
  import Sussess from "./common/Certify_success.vue";
  import { ArrowLeftBold } from "@element-plus/icons-vue";
  import { ref, computed, watch, onMounted } from "vue";
  import { LicenseVerify, CompanyAuth } from "@/api/enterprise";
  import { useCompanyDataStore } from "@/store/companys";
  import { useRouter, useRoute } from "vue-router";
  const router = useRouter();
  const route = useRoute();

  const companyDataStore = useCompanyDataStore();
  const formData = ref<Record<string, any>>({});
  const step = ref(2);

  onMounted(() => {
   
    // companyDataStore.currentComanyInfo.value
    formData.value.name = companyDataStore.currentComanyInfo.name;
    formData.value.social_credit_code = companyDataStore.currentComanyInfo.social_credit_code;
    formData.value.legal_person = companyDataStore.currentComanyInfo.legal_person;
    formData.value.id = companyDataStore.currentComanyInfo.id;

    console.log(formData.value);
  });

  const stepComponent = computed(() => {
    if (step.value === 3) return Sussess;

    // if (step.value === 1) return Step1;
    if (step.value === 2) return Step2;
  });

  const handleStepSuccess = (data: object) => {
    if (step.value === 1) {
      LicenseVerify({
        ...data,
      }).then(res => {
        formData.value = { ...formData.value, ...data };
        step.value++;
      });
    }
    if (step.value === 2) {
       console.log("进来了")
       step.value++;
       companyDataStore.init();
       companyDataStore.setDefaultCompany(companyDataStore.certifyCompany);
      //   formData.value = { ...formData.value, ...data };
     
    }
    if (step.value === 3) {
      back();
    }
  };


  const back = () => {
    router.back();
  };
</script>
<style lang="scss" scoped>
.container-certify {
  width: 100%;
  height: calc(100vh - 96px);
  background: #f5f5f5;

  .wrap {
    width: 980px;
    margin: 0 auto;
    padding-top: 25px;

    .certify-box {
      margin-top: 20px;
      border-radius: 10px;
      background-color: #fff;
      overflow: hidden;

      .top {
        height: 132px;
        background-image: linear-gradient(#f3f9ff, #e6f1ff);
        position: relative;

        img {
          width: 108px;
          height: 116px;
          position: absolute;
          top: 15px;
          right: 50px;
        }

        .title {
          font-size: 20px;
          color: #01509f;
          text-align: center;
          padding-top: 20px;

          strong {
            font-weight: 600;
          }
        }

        .step {
          display: flex;
          justify-content: space-between;
          width: 410px;
          margin: 25px auto 0;

          .step-item {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 90px;

            &:nth-child(1)::after {
              content: "";
              position: absolute;
              top: 8px;
              right: -68px;
              width: 66px;
              height: 1px;
              background-color: #dee2e6;
            }

            &:nth-child(2)::after {
              content: "";
              position: absolute;
              top: 8px;
              right: -68px;
              width: 66px;
              height: 1px;
              background-color: #dee2e6;
            }

            .step-item-icon {
              font-size: 12px;
              text-align: center;
              width: 16px;
              height: 16px;
              line-height: 16px;
              border-radius: 50%;
              color: #9e9f9f;
              border: solid 1px #9e9f9f;
            }

            .step-item-title {
              font-size: 14px;
              color: #666;
              margin-top: 10px;
            }

            &.active {
              .step-item-icon {
                border-color: #77aeff;
                color: #fff;
                background-color: #77aeff;
              }

              .step-item-title {
                color: #01509f;
              }

              &:nth-child(1)::after {
                background-color: #77aeff;
              }
            }
          }
        }
      }

      .content {
        padding: 25px 0 30px;
        max-height: calc(100vh - 400px);
        overflow: auto;

        .inner {
          width: 567px;
          margin: 0 auto;

          .tip {
            height: 38px;
            display: flex;
            align-items: center;
            background-color: #f3f8fb;
            border-radius: 5px;
            margin-bottom: 30px;

            img {
              width: 12px;
              height: 16px;
              margin: 0 4px 0 12px;
            }

            span {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>
